<template>
    <div>
        <el-form label-width="100px" :model="sendFormData" :rules="rules" :size="customStyle.size" ref="validatePasswordForm">
            <el-form-item label="登录账号：">
                <span>{{userInfo.username}}</span>
            </el-form-item>
            <el-form-item label="旧密码：" prop="oldPassword">
                <el-input autocomplete="off" show-password
                          v-model="sendFormData.oldPassword"
                          placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="password">
                <el-input autocomplete="off" show-password
                          v-model="sendFormData.password"
                          placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPassword">
                <el-input autocomplete="off" show-password
                          v-model="sendFormData.confirmPassword"
                          placeholder="请输入确认密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" :loading="apiLoading" @click="$router.go(-1)">返回</el-button>
                <el-button type="primary" :loading="apiLoading" @click="handleSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {changePassword} from '@/api/user'
export default {
    name: "password",
    data(){
        /*const validatorPassConfirm= (rule, value, callback) => {
            if (!String(value).trim()) {
                callback(new Error('请输入密码'));
            } else {
                if (!String(this.rules.confirmPassword).trim()) {
                    this.$refs.validatePasswordForm.validateField('confirmPassword');
                }
                callback();
            }
        }
        const validatorPass= (rule, value, callback) => {
            if (!String(value).trim()) {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.rules.confirmPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }*/
        return {
            sendFormData:{
                username:'',
                oldPassword:'',
                confirmPassword:'',
                password:'',
            },
            rules: {
                oldPassword: [
                    { required:true, trigger: 'blur',min:6 }
                ],
                confirmPassword: [
                    { required:true, trigger: 'blur',min:6 }
                ],
                password: [
                    {required:true, trigger: 'blur',min:6 }
                ]
            }
        }
    },
    created() {
        this.sendFormData.username=this.userInfo.username
    },
    methods:{
        handleSubmit(){
            this.$refs.validatePasswordForm.validate((valid) => {
                if(valid){
                    if(this.sendFormData.password.trim()!==this.sendFormData.confirmPassword.trim()){
                        return this.$message.error('两次密码输入不一致')
                    }
                    changePassword(this.sendFormData).then(res=>{
                        this.$message.success(res.msg)
                    })
                }
            })
        }
    }
}
</script>

<style scoped>

</style>